<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "/stylesheets/tasks.css" %>

    <%= javascript_include_tag "ext/adapter/ext/ext-base.js" %>
    <%= javascript_include_tag "ext/ext-all.js" %>
    <%= javascript_include_tag "ext/build/locale/ext-lang-zh_CN.js" %>
  </head>
  <body>
    <script type="text/javascript">
      Ext.onReady(function(){
        var viewPanel = new Ext.Panel({
          frame: true,
          title: 'Views',
          collapsible: true,
          contentEl: 'task-views',
          titleCollapse: true
        });
                
        var taskActions = new Ext.Panel({
          frame: true,
          title: 'Task Actions',
          collapsible: true,
          contentEl: 'task-actions',
          titleCollapse: true
        });
                
        var groupActions = new Ext.Panel({
          frame: true,
          title: 'Task Grouping',
          collapsible: true,
          contentEl: 'task-grouping',
          titleCollapse: true
        });
        var actionPanel = new Ext.Panel({
          id: 'action-panel',
          region: 'west',
          split: true,
          collapsible: true,
          collapseMode: 'mini',
          width: 200,
          minWidth: 150,
          border: false,
          baseCls: 'x-plain',
          items: [taskActions, viewPanel, groupActions]
        });

        //开始生成菜单栏
        var tb = new Ext.Toolbar();
        tb.render('toolbar');
        //菜单项之元数据，即仓库信息，货品信息等基础数据的设置
        var metaDataMenu = new Ext.menu.Menu(
        {
          items: [{
              text: '仓库资料'//,
              //handler: onItemClick
            }]
        });
        tb.add({
          text: '业务系统',
          menu: metaDataMenu // assign menu by instance
        })
        new Ext.Viewport({
          enableTabScroll: true,
          layout: "border",
          items: [{
              title: "Happy ERP",
              region: "north",
              height: 50,
              items:[tb]
            }, actionPanel,
            {
              xtype: "tabpanel",
              region: "center",
              items: [{
                  title: "面板1"
                }, {
                  title: "面板2"
                }]
            }]
        });
      });
    </script>
    <div id="toolbar"></div>
    <div id="main"></div>
    <div id="status"></div>
    <ul id="task-views" class="x-hidden">
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-all"/><a id="view-all" href="#">All tasks</a>
      </li>
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-active"/><a id="view-active" href="#">Active tasks</a>
      </li>
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-complete"/><a id="view-complete" href="#">Completed tasks</a>
      </li>
    </ul>
    <ul id="task-actions" class="x-hidden">
      <li id="new-task">
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-edit"/><a id="action-new" href="#">Add a new task</a>
      </li>
      <li style="display:none;">
        <img src="/javascripts/ext/resources/images/default/s.gif"/><a id="action-complete" href="#">Mark selected task<span class="s">s</span> completed</a>
      </li>
      <li style="display:none;">
        <img src="/javascripts/ext/resources/images/default/s.gif"/><a id="action-active" href="#">Mark selected task<span class="s">s</span> active</a>
      </li>
      <li style="display:none;">
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-delete"/><a id="action-delete" href="#">Delete selected task<span class="s">s</span></a>
      </li>
    </ul>
    <ul id="task-grouping" class="x-hidden">
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-by-date"/><a id="group-date" href="#">By Date</a>
      </li>
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-by-category"/><a id="group-cat" href="#">By Category</a>
      </li>
      <li>
        <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-no-group"/><a id="no-group" href="#">No Grouping</a>
      </li>
    </ul>
  </body>
</html>
